<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas width="500px" height="500px"></canvas>
    <script>
      const canvas = document.querySelector('canvas')
      const ctx = canvas.getContext('2d')

      const POINTS = 1000000
      const TIMES = 30

      for (let i = 0; i < POINTS; i++) {
        const C = [Math.random() * 4 - 2, Math.random() * 4 - 2]
        let z = [0, 0]
        for (let n = 0; n < TIMES; n++) {
          z = [z[0] * z[0] - z[1] * z[1], 2 * z[0] * z[1]]
          z[0] += C[0]
          z[1] += C[1]
        }
        if (z[0] * z[0] + z[1] * z[1] < 4) {
          ctx.fillRect(C[0] * 125 + 250, C[1] * 125 + 250, 1, 1)
        }
      }
    </script>
  </body>
</html>
